<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: fancybox  -->
    <script src="/plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
    <link href="/plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
    </script>
</head>
<body>

<header class="section-header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <form action="/HTML/userInfo" method="post" name="showUserInfoForm" >
            <a class="navbar-brand" href="javascript:history.go(-1)" name="savesubmit" id="savesubmit"> <img class="logo" src="/images/logo-white.png" th:text="'  '+'注册'"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </form>
    </nav>
</header> <!-- section-header.// -->


<section class="section-content padding-y">
    <div class="container">
        <div class="float-right col-sm-4">
            <div class="card">
                <article class="card-body">
                    <h4 class="card-title mt-3 text-center">用户注册</h4>
                    <p class="divider-text">
                        <span>请填写以下信息</span>
                    </p>
                    <form class="col-sm-12" action="/HTML/registerIn" method="post">
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                            </div>
                            <input name="account" class="form-control" placeholder="创建账号" type="text" id="act" onkeydown="ableEdit()">
                        </div> <!-- form-group// -->
                        <!--<div class="form-group input-group">-->
                            <!--<div class="input-group-prepend">-->
                                <!--<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>-->
                            <!--</div>-->
                            <!--<input name="" class="form-control" placeholder="邮箱" type="email">-->
                        <!--</div> &lt;!&ndash; form-group// &ndash;&gt;-->
                        <!--<div class="form-group input-group">-->
                            <!--<div class="input-group-prepend">-->
                                <!--<span class="input-group-text"> <i class="fa fa-phone"></i> </span>-->
                            <!--</div>-->
                            <!--<select class="custom-select" style="max-width: 120px;">-->
                                <!--<option selected="">+86</option>-->
                            <!--</select>-->
                            <!--<input name="" class="form-control" placeholder="电话" type="text">-->
                        <!--</div> &lt;!&ndash; form-group// &ndash;&gt;-->
                        <!--<div class="form-group input-group">-->
                            <!--<div class="input-group-prepend">-->
                                <!--<span class="input-group-text"> <i class="fa fa-heart"></i> </span>-->
                            <!--</div>-->
                            <!--<select class="form-control">-->
                                <!--<option selected="">性别</option>-->
                                <!--<option value="nan">男</option>-->
                                <!--<option value="nv">女</option>-->
                            <!--</select>-->
                        <!--</div> &lt;!&ndash; form-group end.// &ndash;&gt;-->
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                            </div>
                            <input class="form-control" placeholder="创建密码" type="password" name="password" id="pwd1" onkeydown="ableEdit()">
                        </div> <!-- form-group// -->
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                            </div>
                            <input class="form-control" placeholder="确认密码" type="password" name="passwordD" id="pwd2" onkeyup="validate()">
                        </div> <!-- form-group// -->
                        <div class="form-group">
                            <button  type="reset" class="btn btn-link float-right " onclick="cleantishi()" >重置</button>
                            <span id="tishi3"></span>
                        </div> <!-- form-group// -->
                        <div class="form-group">
                            <button type="submit" id="submit" onclick="isNull()" class="btn btn-primary btn-block">创建账号</button>
                        </div> <!-- form-group// -->
                        <p class="text-center">已有账号？<a href="/HTML/login">登录</a> </p>
                    </form>
                </article>
            </div> <!-- card.// -->

        </div>

        <header class="section-heading">
            <h2>酒店辅助订购系统</h2>
        </header><!-- sect-heading -->

        <article>


            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <br><br><br><br><br><br><br><br>

        </article>

    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->

<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p>四川大学实训项目<br>第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019 · 7 · 8 <br>
                    中国 · 成都
                    <!--<a href="#">中国 · 成都</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->

<script type="text/javascript">
    function validate() {
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
        <!-- 对比两次输入的密码 -->
        if(pwd1 == pwd2) {
            document.getElementById("tishi3").innerHTML="<font color='green'>两次密码相同</font>";
            document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("tishi3").innerHTML="<font color='red'>两次密码不相同</font>";
            document.getElementById("submit").disabled = true;
        }
    }
    function cleantishi() {
        document.getElementById("tishi3").innerHTML="";
    }

    function isNull() {

        var account =document.getElementById("act").value;
        var password =document.getElementById("pwd1").value;
        var cfPassword=document.getElementById("pwd2").value;

        if (account == "" || account == null ){
            document.getElementById("submit").disabled = true;
            alert("请填写账号")
        }
        else if(password == "" || password == null){
            document.getElementById("submit").disabled = true;
            alert("请先填写密码");
        }
        else if(cfPassword == "" || cfPassword == null){
            document.getElementById("submit").disabled = true;
            alert("请填写确认密码项");
        }
        else{

        }
    }
    window.onload=isSuccess();
    function isSuccess() {
        var flag=[[${flag}]];
        if(flag=="1"){
            document.getElementById("submit").disabled = true;
            alert("注册失败：用户名重复");
            window.location.href="/HTML/register";
        }
        else if(flag=="0"){
            alert("注册成功");
            document.getElementById("submit").disabled = false;
        }
        else{

        }
    }
    function ableEdit() {
        document.getElementById("submit").disabled = false;
    }
</script>
</body>
</html>